<template>
  <aside class="aside">
    <a-card
      size="small"
      title="图层目录"
      style="width: 230px"
      :headStyle="head"
      :bordered="false"
    >
      <a-tree
        v-model:checkedKeys="checkedKeys"
        checkable
        :tree-data="treeData"
        default-expand-all
        @check="handleCheck"
      ></a-tree>
    </a-card>
  </aside>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue'
const head = reactive({
  'background-color': ' #409eff',
  color: '#ffffff',
})
const TreeName = ref([])
const { map } = defineProps({
  map: {
    type: Object,
  },
})

const selectedKeys = ref([])
const checkedKeys = ref(['0-0'])

const handleCheck = (e) => {
  const newarray = []
  e.forEach((item) => {
    newarray.push(item.substr(6, 1))
  })
  const layerstr = newarray.join(',')
  var m = map.value.getLayers().array_[4]
  m.setLayerStatus(layerstr, 'show')
}
//目录数据存放
const treeData = [
  {
    title: '地图文档',
    key: '0-0',
    children: [
      {
        title: '新地图 1',
        key: '0-0-0',
        children: TreeName.value,
      },
    ],
  },
]
//初始化地图目录树
const initLayerTree = () => {
  /* ===矢量地图文档目录服务（获取发布的矢量地图文档列表）=== */
  var docCatalog = new Zondy.Catalog.MapDoc({
    ip: 'localhost',
    port: 6163,
    //或获取的地图文档的名称
    docName: 'guanggu',
    //设置地图的索引号
    mapIndex: 0,
  })
  //调用getMapDocList方法，获取服务器地图文档列表，在回调函数中处理结果
  docCatalog.getLayersInfo(getListSuccess)
  //成功回调
  function getListSuccess(data) {
    // console.log(data)
    data.value.forEach((element, index) => {
      TreeName.value.push({ title: element.Name, key: '0-0-0-' + index })
    })
  }
}
//初始化地图目录
onMounted(() => {
  initLayerTree()
})
</script>

<style socped>
.aside {
  position: absolute;
  top: 200px;
  right: 0px;
  padding-right: 35px !important;
  background-color: rgba(253, 253, 252, 0) !important;
  z-index: 10;
}
</style>
